/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    var storeBaseParams = { keyword: ''};
    // create the Data Store
    var store = new Ext.data.JsonStore({
        root: 'stops',
        totalProperty: 'total',
        idProperty: 'stopid',
        remoteSort: true,
        baseParams: storeBaseParams,
        fields: [
            'name', 'description', 'latitude', 'longitude', {name: 'connections', type: 'int'}
        ],

        proxy: new Ext.data.HttpProxy({
            url: 'allStops.jsp'
        })
    });
    store.setDefaultSort('name', 'asc');


    function renderStop(value, p, record){
        return String.format(
                '<b><a href="editStop.jsp?id={2}">{0}</a></b>',
                value, record.data.name, record.id );
    }
    
    var searchbox = new Ext.form.TextField({
       name: 'search',
       width: 490,
       allowBlank: true
    });

    var button = new Ext.Button({
       name: 'searchbut',
       text: ' Search',
       width: 75,
       handler: function (){
           aKey = searchbox.getValue();
           store.setBaseParam('keyword',searchbox.getValue());
           store.load({params:{start:0, limit:10}});
         }
   });

    var tb = new Ext.Toolbar();

    tb.add( searchbox, button);

    var grid = new Ext.grid.GridPanel({
        width:580,
        height:450,
        title:'nnap - Current Stops',
        store: store,
        trackMouseOver:false,
        disableSelection:false,
        loadMask: true,

        // grid columns
        columns:[{
            //id: 'stop', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "Stop",
            dataIndex: 'name',
            width: 180,
            renderer: renderStop,
            sortable: true
        },{
            header: "Connections",
            dataIndex: 'connections',
            width: 70,
            align: 'right',
            sortable: true

        }],

        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:false,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.description +'</p>';
                    p.body += '<p>Location: <span class="geo"><span class="latitude"> '+record.data.latitude +'</span>';
                    p.body += '<span class="longitude"> '+record.data.longitude +'</span></span></p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },

        tbar: tb,

        // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying Stops {0} - {1} of {2}',
            emptyMsg: "No Stops Found",
            
            items:[
                '-', {
                    pressed: false,
                    enableToggle:true,
                    text: 'Details ',
                    cls: 'x-btn-text-icon',
                    toggleHandler: function(btn, pressed){
                        var view = grid.getView();
                        view.showPreview = pressed;
                        view.refresh();
                        }
                }, '-', {
                    pressed: false,
                    text: "Add",
                    handler: function (){
                        window.location.href='editStop.jsp';
                    }
                }, '-', {
                    text: "Delete",
                    handler: function (btn) {
                        var sm = grid.getSelectionModel();
                        var rec = sm.getSelected();
                        if (rec) {
                            //alert(rec.data.toSource() );
                            //alert(rec.id);
                          
                            Ext.MessageBox.confirm('Delete Warning', 'Are you sure you want to delete ' + rec.data.name + '?', confirmDelete);
                        }

                    }
                }
               
           ]
        })
    });


    function confirmDelete(btn){
        if (btn =='yes') {
            var sm = grid.getSelectionModel();
            var rec = sm.getSelected();
            var stopid = rec.id;
            Ext.Ajax.request({
                url:'deleteStop.jsp',
                params:{id: stopid},
                waitMsg:'Saving Data...',
                success: function (p, action) {
                    store.reload();
                },
                failure:function(p, action) {
                    Ext.MessageBox.alert('Message', 'Delete Failed<p>' + action.response.responseText);
                }

            });

        }
    };


    // render it
    grid.render('grid');

    // trigger the data store load
    store.load({params:{start:0, limit:10}});
});
